{extend name='public/base' /}

{block name="content"}
<style type="text/css">
	html {
		background-color: #fff !important;
	}

	table {
		border-collapse: collapse;
		text-align: center;
		width: 720px;
		table-layout: fixed !important;
	}

	table td {
		border: 0.5px solid #f1f0f0;
		color: #000000;
		height: 30px;
		font-size: 13px;
		width: 30px;
		white-space: nowrap;
		/* 自适应宽度*/
	}

	table th {
		border: 0.5px solid #f1f0f0;
		color: #000000;
		height: 40px;
		font-weight: 600;
		font-size: 15px;
	}


	table thead th {
		width: 144px;
	}

	.tianjia {
		color: #ffffff;
		font-size: 14px;
		background-color: #2d8cf0;
		padding: 3px;
		width: 80px;
		border-radius: 5px;
		text-align: center;
		line-height: 24px;
		display: inline-block;
		float: right;
	}

	.banjies {
		color: #ffffff;
		font-size: 14px;
		background-color: #2d8cf0;
		padding: 3px;
		width: 60px;
		border-radius: 5px;
		text-align: center;
		line-height: 24px;
		display: inline-block;
	}

	.tanchu {
		position: absolute;
		top: 170px;
		left: 440px;
		background-color: #fff;
		border: #ccc solid 1px;
		width: 330px;
		border-radius: 10px;
	}

	input {
		border: none;
		height: 30px;
		text-align: center;
		max-width: 144px;
	}

	.yes {
		color: #ffffff;
		font-size: 14px;
		background-color: #2d8cf0;
		padding: 3px;
		width: 60px;
		border-radius: 5px;
		text-align: center;
		line-height: 24px;
		display: inline-block;
		float: left;
		margin: 20px 0 20px 0;
	}

	.no {
		color: #ffffff;
		font-size: 14px;
		background-color: #2d8cf0;
		padding: 3px;
		width: 60px;
		border-radius: 5px;
		text-align: center;
		line-height: 24px;
		display: inline-block;
		float: right;
		margin: 20px 0 20px 0;
	}
	.swriperC{
		position: fixed;
		top: 100px;
		left: 50%;
		    width: 500px !important;
		    text-align: center;
		    height: 280px !important;
			margin-left: -250px;
		z-index: 9;
	}
	.layFormC{
		position: relative;
	}
	.maskC{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: rgba(0,0,0,0.4);
	}
</style>
<div class="layui-col-md12">
	<div class="layui-card">
		<div class="layui-card-body">
			<div style=" width:800px;">
				<div style="font-weight: 600; font-size: 18px; line-height: 50px;">基本信息</div>
				<div style="display: flex;justify-content:space-between;">
					<span style=" width: 500px;line-height: 35px;font-size: 14px;">缴费单号：{$info.order_sn}</span>
					<span style=" width: 500px;line-height: 35px;font-size: 14px;">状态：{$info.pay_status_name}</span>
					<span style=" width: 500px;line-height: 35px;font-size: 14px;">创建时间：{$info.cjtime}</span>
				</div>
				<div style="display: flex;justify-content:space-between;">
					<span style=" width: 500px;line-height: 35px;font-size: 14px;">姓名：{$info.username}</span>
					<span style=" width: 500px;line-height: 35px;font-size: 14px;">备注：{$info.remark}</span>
				</div>
				<div style="display: flex;justify-content:space-between;">
					<span style=" width: 500px;line-height: 35px;font-size: 14px;">审核时间：{$info.remark}</span>
				</div>
			</div>
			<div style="width: 600px;">
				<div style="font-weight: 600; font-size: 18px; line-height: 50px;">商户信息</div>
				<div style="display: flex;justify-content:space-between;width: 396px;">
					<span style="line-height: 35px;font-size: 14px;">商户名：{$info.merchants.name}</span>
					<span style="line-height: 35px;font-size: 14px;">商户编号：{$info.merchants.merchant_sn}</span>
				</div>
			</div>
			<div style="width: 600px;">
				<div style="font-weight: 600; font-size: 18px; line-height: 50px;">费用信息</div>
				<div style="display: flex;justify-content:space-between;">
					<span style="line-height: 35px;font-size: 14px;">缴费项目：{$info.costType.cost_name}</span>
					<span style="line-height: 35px;font-size: 14px;">缴费总金额：{$info.real_amount}</span>
				</div>
			</div>
			<!--            <div style="width:800px;text-align: left; border: 1px solid #ccc;">-->
			<!--                <div style="display: flex;justify-content:space-between;background-color: #dfdfdf;">-->
			<!--                    <span style=" width: 200px;border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;line-height: 35px;font-size: 15px;font-weight: 600;text-indent:1em;">科目编码</span>-->
			<!--                    <span  style=" width: 200px;border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;line-height: 35px;font-size: 15px;font-weight: 600;text-indent:1em;">项目名称</span>-->
			<!--                    <span  style=" width: 200px;border-bottom: 1px solid #ccc;line-height: 35px;font-size: 15px;font-weight: 600;text-indent:1em;">金额（元）</span>-->
			<!--                </div>-->
			<!--                {volist name="info.costRule" id="t"}-->
			<!--                <div style="display: flex;justify-content:space-between;">-->
			<!--                    <span  style=" width: 200px;border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;line-height: 35px;font-size: 13px;text-indent:2em;">{$t.cost_sn}</span>-->
			<!--                    <span  style=" width: 200px;border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;line-height: 35px;font-size: 13px;text-indent:2em;">{$t.name}</span>-->
			<!--                    <span  style=" width: 200px;border-bottom: 1px solid #ccc; line-height: 35px;font-size: 13px;text-indent:2em;">{$t.z_money}</span>-->
			<!--                </div>-->
			<!--                {/volist}-->
			<!--            </div>-->
			<div style="width: 800px;display: flex;justify-content:space-between;">
				<span style="line-height: 35px;font-size: 14px;">缴费时间：{$info.pay_time}</span>
				<span style="line-height: 35px;font-size: 14px;">支付方式：{$info.subject_id}</span>
				<span style="line-height: 35px;font-size: 14px;">缴费方式：{$info.is_user}</span>
				<span style="line-height: 35px;font-size: 14px;">缴费人：{$info.fees_user}</span>
			</div>
			<form>
				<div style="width: 600px;line-height: 50px;font-weight: 600; margin: 16px 0 4px 0;">缴费项目信息
					{if $info->pay_status==1}
					<div class="tianjia" lay-filter="refund" lay-submit="">退费</div>
					{/if}
				</div>

				<table class="table">
					<thead>
						<tr style=" background-color: #f7f7f7;">
							<th>项目名称</th>
							<th>收费类型</th>
							<th>金额</th>
							<!-- <th>退费情况</th> -->
						</tr>
					</thead>
					{volist name="info.costRule" id="t"}
					<tr>
						<td>{$t.cost_sn}</td>
						<td>{$t.type}</td>
						<td>{$t.z_money}</td>
						<!-- {if $info->pay_status==1} -->
						<!-- <td>未退费</td>	 -->
						<!-- {/if} -->
						<!-- {if $info->pay_status!=1} -->
						<!-- <td style="color: #f00;">已退费</td> -->
						<!-- {/if} -->
					</tr>
					{/volist}
					</tr>
				</table>
		</div>
		</form>
		<!-- <div> -->
		<!-- <div style="font-weight: 600; font-size: 18px; line-height: 50px;">其他信息</div> -->
		<!-- <div style="display: flex;"> -->
		<!-- <div style="display: flex;line-height: 35px;font-size: 15px;"> -->
		<!-- <span>身份证正面：</span> -->
		<!-- 放个链接 -->
		<!-- <img style="width: 260px;margin: 10px 0 10px 0px;height: 150px" src="{$info.id_card_positive}" -->
		<!-- width="120" height="120"> -->
		<!-- </div> -->
		<!-- <div style="display: flex;line-height: 35px;font-size: 15px;"> -->
		<!-- <span>身份证反面：</span> -->
		<!-- 放个链接 -->
		<!-- <img style="width: 260px;margin: 10px 0 10px 0px;height: 150px" src="{$info.id_card_negative}" -->
		<!-- width="120" height="120"> -->
		<!-- </div> -->
		<!-- </div> -->
		<!-- {if condition="$info.other_certificate"} -->
		<!-- <div style="display: flex;line-height: 35px;font-size: 15px;margin: 0 0 0 15px;">其他证件： -->
		<!-- 放个链接 -->
		<!-- <img style="width: 260px;margin: 10px 0 10px 0px;height: 150px" src="{$info.id_card_negative}" -->
		<!-- width="120" height="120"> -->
		<!-- </div> -->
		<!-- {/if} -->
		<!-- </div> -->
		
		<div class="layui-form-item" id="sum_number">
			<label class="layui-form-label">办理张数 </label>
			<div class="layui-input-block">
				<input type="text" name="number" id="number" value="1" lay-filter="number" autocomplete="off"
					placeholder="请输入需缴金额" class="layui-input">
			</div>
		</div>
		<div style="width: 600px;line-height: 50px;font-weight: 600;">施工人员
			<!-- <div class="tianjia" lay-filter="join"
				lay-submit="">添加</div> -->
		</div>
		<form>
			<table class="table" id="data">
				<thead>
					<tr style=" background-color: #f7f7f7;">
						<!-- <th>序号</th> -->
						<th>姓名</th>
						<th>手机号</th>
						<th>身份证号</th>
						<th>证件照片</th>
						<th>操作</th>
					</tr>
				</thead>
				{volist name="info.Cost" id="t"}
				<tbody id="1">
					<!-- <td><input type="text" name="user" v-model="{$t.id}"></td> -->
					<tr class="removeBox">
						<td><input type="text" name="name" id="username" value="{$t.username}"></td>
						<td><input type="text" name="phone" id="mobile" value="{$t.mobile}"></td>
						<td><input type="text" name="card" id="card_number" value="{$t.card_number}"></td>
						<td style="color: #2d8cf0;" onclick="lookImages({$t})" id="lookImage">查看</td>
						<td style="font-weight: 600;"><span style="color: #f00;"><span onclick="removeInfo(this)"
									class="removeBtn">移除</span></span></td>
					</tr>
				</tbody>
				{/volist}
			</table>
			<div
				style="width: 700px;text-align: right;min-width: 600px;font-size: 13px;font-weight: 600;color: #2d8cf0;line-height: 30px;">
				<span onclick="addPerson()">+添加施工人员</span>
			</div>
			<!-- {/if} -->
			<div style="width: 210px;margin: 0 0 0 194px;"> <span class="yes" lay-submit lay-filter="refer">提交</span>
				<span class="no" lay-filter="exit" lay-submit>取消</span>
			</div>
			<div class="maskC" id="mask2" onclick="mask1()">
				
			</div>
			<div class="layui-carousel swriperC" id="test2">
			  <div carousel-item>
			    <div>
					<div style="width: 500px;height: 280px;display: inline-block; text-align: center;"
						id="image1"><span style="line-height: 280px;color: #ccc;font-size: 12px;">+点击添加身份证正面</span>
					</div>
				</div>
			    <div>
					<div style="width: 500px;height: 280px;display: inline-block;text-align: center;"
						id="image2"><span style="line-height: 280px;color: #ccc;font-size: 12px;">+点击添加身份证反面</span>
					</div>
				</div>
			    <div>
					<div style="width: 500px;height: 280px;display: inline-block;text-align: center;"
						id="image3"><span style="line-height: 280px;color: #ccc;font-size: 12px;">+点击添加其他证件</span>
					</div>
				</div>
				
			  </div>
			</div>
		</form>
	</div>
</div>
<div class="tanchu" style="display: none;" id="tanchu">

	<div class="uni-card uni-border" class="uni-card--full uni-card--shadow" style=" margin: 18px 0 0 0;">
		<span style="margin: 0 0 0 10px;">详细信息：</span>
		<div style="margin: 30px 0 6px 0;">
			<span style="margin: 0 0 0 12px;display: inline-block;width: 120px;">*身份证正面：</span>
			<div style="width: 180px;height: 130px;border-radius: 5px;border: 0.5px #ccc solid;display: inline-block;"
				id="image1">
				<!-- <span style="line-height: 124px;margin: 0 0 0 60px;color: #ccc;font-size: 12px;">+点击添加</span> -->
				<img src="../../../../public/static/images/toutu.png"
					style="width: 174px;height: 128px;margin: 0 0 0 4px;">
			</div>
			<span style="display: inline-block;width: 120px;margin: 0 0 0 12px;">*身份证反面：</span>
			<div style="width: 180px;height: 130px;border-radius: 5px;border: 0.5px #ccc solid;display: inline-block;"
				id="image2">
				<!-- <span style="line-height: 124px;margin: 0 0 0 60px;color: #ccc;font-size: 12px;">+点击添加</span> -->
				<img src="../../../../public/static/images/toutu.png"
					style="width: 174px;height: 128px;margin: 2px 0 0 4px;">
			</div>
		</div>
		<div style="width: 240px;height: 50px;margin: 30px 0 0 42px;"> <span class="banjies" lay-submit
				lay-filter="exit" style="float: left;">确定</span><span class="banjies" lay-submit lay-filter="exit"
				style="float: right;">取消</span></div>
	</div>
</div>
{/block}

{block name="js"}
<!--js处理区-->

<script>
	var i = 1;
	let flag
	let number = document.getElementById('number')
	let trHtmlString =
		`<tr class="removeBox">\n
			<td><input type="text" name="name" id="username"></td>\n
			<td><input type="text" name="phone" id="mobile"></td>\n
			<td><input type="text" name="card" id="card_number"></td>\n
			<td style="color: #2d8cf0;" onclick="lookImages()" id="lookImage">查看</td>\n
			<td style="font-weight: 600;"><span style="color: #f00;"><span onclick="removeInfo(this)" class="removeBtn">移除</span></span></td></tr>`

	function addF(num) {
		var add = document.querySelector("tbody[id='1']")
		let addString = ''
		addString += trHtmlString
		return addString
	}
	var removeBtn = document.getElementsByClassName('removeBtn')
	var removeBox = document.getElementsByClassName('removeBox')

	function addPerson() {
		var add = document.querySelector("tbody[id='1']")
		let tr = document.createElement("tr")
		tr.innerHTML = trHtmlString
		add.appendChild(tr)
		number.value = add.children.length
	}

	function delPerson() {
		var add = document.querySelector("tbody[id='1']")
		console.log(add.children, add.children.length)
		add.removeChild(add.children[add.children.length - 1])
		number.value = add.children.length
	}
	window.onload = () => {
		var add = document.querySelector("tbody[id='1']")
		// add.innerHTML = trHtmlString
		mask2.style.display = "none"
		test2.style.display = "none"
		number.value = 9
	}
	function lookImages(t){
		console.log(t)
		// test2.show();
		// mask2.show()
		mask2.style.display = "block"
		test2.style.display = "block"
		
		
		
		if(t.id_card_negative != ""){
			var image1 = document.getElementById('image1')
			image1.innerHTML = ` <img id="img1" src="${t.id_card_negative}" style="width: 100%; height: 100%;" >`
			
		}else if(t.id_card_positive != ""){
			var image2 = document.getElementById('image2')
			image2.innerHTML = ` <img id="img2" src="${t.id_card_positive}" style="width: 100%; height: 100%;" >`
			
		}else if(t.other_certificate != ""){
			var image3 = document.getElementById('image3')
			image3.innerHTML = ` <img id="img3" src="${t.other_certificate}" style="width: 100%; height: 100%;" >`
		}
		
		
		
	}
	function mask1(){
		// test2.hide()
		// mask2.hide()
		mask2.style.display = "none"
		test2.style.display = "none"
	}
	
	// number.onblur = () => {
	// 	var add = document.querySelector("tbody[id='1']")
	// 	let a = (number.value * 1) - add.children.length
	// 	if (a > 0) {
	// 		for (let i = 1; i <= a; i++) {
	// 			addPerson()
	// 		}
	// 	} else if (a < 0) {
	// 		for (let i = -1; i >= a; i--) {
	// 			delPerson()
	// 		}

	// 	}
	// 	flag = number.value * 1

	// }

	for (let i in removeBtn) {
		removeBtn[i].onclick = () => {
			removeBox[i].innerHTML = ``
		}
	}


	function removeInfo(e) {
		// alert('1')
		e.parentNode.parentNode.parentNode.remove()
		console.log(removeBtn.length)
		number.value = removeBtn.length
		// console.log(1111111)
		// $.ajax({
		// 	url: "{:url('remove')}", 
		// 	type: "post",
		// 	data: {
		// 		'id': e
		// 	},
		// 	dataType: "json",
		// 	success: function(data) {
		// 		layer.msg("移除成功", {
		// 			icon: 5,
		// 			time: 1000
		// 		});
		// 	}
		// });
	}
</script>
<script>
	// var i = 1;
	// function add() {
	// 	var add = document.querySelector("tbody[id='1']")
	// 	// <td><input type="text" name="user" v-model="{$t.id}"></td>    
	// 	add.innerHTML += '<tr class="removeBox">\n' +
	// 		'        <td><input type="text" name="name" id="username" ></td>\n' +
	// 		'        <td><input type="text" name="phone" id="mobile" ></td>\n' +
	// 		'        <td><input type="text" name="card" id="card_number"></td>\n' +
	// 		'        <td style="color: #2d8cf0;">上传</td>\n' +
	// 		'        <td style="font-weight: 600;"><span style="color: #f00;" onclick="removeInfo({$t.id})"><span class="removeBtn">移除</span></span></td></tr>'

	// }
	// var removeBtn = document.getElementsByClassName('removeBtn')
	// var removeBox = document.getElementsByClassName('removeBox')
	// let lookImage = document.getElementById('lookImage')
	// for (let i in removeBtn) {
	// 	removeBtn[i].onclick = () => {
	// 		removeBox[i].innerHTML = ``
	// 	}
	// }
	// lookImage.onclick = ()=>{

	// }

	// function removeInfo(e) {
	// 	console.log(e)
	// 	$.ajax({
	// 		url: "{:url('remove')}",
	// 		type: "post",
	// 		data: {
	// 			'id': e
	// 		},
	// 		dataType: "json",
	// 		success: function(data) {
	// 			layer.msg("移除成功", {
	// 				icon: 5,
	// 				time: 1000
	// 			});
	// 		}
	// 	});
	// }

	layui.use(['element', 'table', 'form', 'jquery', 'lucky', 'opTable','carousel','upload'], function() {
		var element = layui.element;
		var form = layui.form;
		var table = layui.table;
		var $ = layui.jquery;
		var lucky = layui.lucky;
		var opTable = layui.opTable;
		var carousel = layui.carousel;
		var upload = layui.upload;
		form.render();
		var id_card_positive = ''
		var id_card_negativ = ''
		var other_certificate = ''

		function look(e) {
			console.log('给我看看')
			document.getElementById("tanchu").style.display = "block";
		}
		form.on('submit(exit)', function(obj) {
			console.log('点击关闭')
			document.getElementById("tanchu").style.display = "none";
		});

		// var myTables = table.render({
		//     elem: '#table_id',
		//     url:"{:url('index')}",
		//     where: { info_type: 2},
		// toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
		//     defaultToolbar: ['filter', 'exports', 'print'],
		// even: true, //开启隔行背景
		//     id:'table_id',
		// page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
		//         layout: ['limit', 'count', 'prev', 'page', 'next', 'skip','last'] //自定义分页布局
		//         ,groups: 5 //只显示 1 个连续页码
		//         ,first: false //不显示首页
		//         ,last: false //不显示尾页
		//         ,limit:20
		//         ,limits:[10,20,30,50]
		//     },
		//       // height: 'full-100',100',
		//     text: {
		//         none: '暂无相关数据'
		//     },
		//     cols: [[
		//         { title: '', type: 'checkbox', fixed: true},
		//         { title: 'UID', field: 'id'},
		//         { title: '缴费单编号', field: 'order_sn', edit: 'text'},
		//         { title: '商户编号', field: 'merchant',templet:function (item) { return item.merchant.merchant_sn}},
		//         { title: '品牌名', field: 'merchant',templet:function (item) { return item.merchant.name}},
		//         { title: '收费项目', field: 'costType', templet:function (item) { return item.costType.name}},
		//         { title: '收费类型', field: 'costType' ,templet:function (item) {
		//             var type = item.costType.type
		//             if ( type== 1){
		//                 return '保证金'
		//             } else if (type == 2){
		//                 return '押金'
		//             } else if (type == 3){
		//                 return '费用'
		//             } else{
		//                 return '未知类型'
		//             }
		//         }},
		//         { title: '实收金额', field: 'amount' },
		//         { title: '缴费状态', field: 'pay_status',templet:function (item) {
		//                 var status = item.pay_status
		//                 if ( status== 0){
		//                     return '未支付'
		//                 } else if (status == 1){
		//                     return '已支付'
		//                 } else if (type == -1){
		//                     return '费用'
		//                 } else{
		//                     return '已经退费'
		//                 }
		//             }},
		//         { title: '缴费人信息', field: 'mobile' , edit: 'text'},
		//         { title: '缴费时间', field: 'create_time'},
		//         { title: '创建人', field: 'add_user' , edit: 'text'},
		//         { title: '打印次数', field: 'print_number' , edit: 'text'},
		//         {templet: '#operationTpl', width: 160, align: 'center', title: '操作'}
		//     ]],
		//     //  展开的列配置
		//     openCols: [
		//     {field: 'desc', title: '描述信息'}
		//     ],
		//     done: function (res) {
		//         layer.closeAll('loading');
		//     }
		// });
		form.on('submit(refer)', function(data) {
			console.log('进来了2', data)

			var id = "{$id}"
			var username = document.getElementById('username').value
			var mobile = document.getElementById('mobile').value
			var card_number = document.getElementById('card_number').value
			// if (id_card_positive == '') {
			// 	layer.msg("请上传身份证正面", {
			// 		icon: 5,
			// 		time: 1500
			// 	});
			// } else if (id_card_negativ == '') {
			// 	layer.msg("请上传身份证反面", {
			// 		icon: 5,
			// 		time: 1500
			// 	});
			// } else 
			if (!username) {
				layer.msg("请填写名称", {
					icon: 5,
					time: 1500
				});
			} else if (!mobile) {
				layer.msg("请填写手机号", {
					icon: 5,
					time: 1500
				});
			} else {
				$.ajax({
					url: "{:url('staff')}",
					type: "post",
					data: {
						id_card_positive: id_card_positive,
						id_card_negativ: id_card_negativ,
						other_certificate: other_certificate,
						card_number: card_number,
						username: username,
						mobile: mobile,
						id: id
					},
					dataType: "json",
					success: function(data) {
						console.log('code=>', data.code)
						if (data.code == 1) {
							layer.msg(data.msg, {
								icon: 5,
								time: 2000
							});
						} else {
							layer.msg("添加成功", {
								icon: 1,
								time: 2000
							});
							setTimeout(() => {
								parent.location.reload();
								var index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
							}, 2000)
						}
					}
				});
			}
		});
		// form.on('submit(join)', function(obj) {
		// 	var id = "{$id}"
		// 	lucky.CreateOpenForm("添加", "{:url('staff')}?id=" + id, '85%');
		// 	return false;
		// });
		form.on('submit(refund)', function(obj) {
			var id = "{$id}"
			$.ajax({
				url: "{:url('IsRebate')}",
				type: "post",
				data: {
					'id': id
				},
				dataType: "json",
				success: function(data) {
					if (data.code == 1) {
						layer.msg(data.msg, {
							icon: 5,
							time: 1000
						});
					} else {
						lucky.CreateOpenForm("退费", "{:url('rebate')}?id=" + id, '85%');
						return false;
					}
				}
			});

		});
		carousel.render({
		    elem: '#test2'
		    ,width: '100%' //设置容器宽度
		    ,arrow: 'none' ,//始终显示箭头
		    //,anim: 'updown' //切换动画方式
		  });
		  carousel.on('change(test2)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
		    console.log(obj.index); //当前条目的索引
		    console.log(obj.prevIndex); //上一个条目的索引
		    console.log(obj.item); //当前条目的元素对象
		  });
		upload.render({
			elem: '#image1',
			url: "{:url('common/UpImg')}" //图片上传地址
				,
			accept: 'images' //
				,
			acceptMime: 'image/*',
			size: 1024 * 12,
			before: function(res) {
				loading = layer.load(2, {
					shade: [0.2, '#000'] //0.2透明度的白色背景
				});
			},
			done: function(data) {
				var image1 = document.getElementById('image1')
				image1.innerHTML = ` <img id="img1" src="" style="width: 100%; height: 100%;" >`
				layer.close(loading);
				if (data.code == 1) {
					console.log(data)
					id_card_positive = data.data.thumb_path
					$("#img1").attr("src", data.data.thumb_path);
					layer.msg('图片上传成功', {
						icon: 1,
						time: 1000
					});
				} else {
					layer.msg(data.msg, {
						icon: 5,
						time: 1000
					});
				}
			},
			error: function(red) {
				layer.close(loading);
				layer.msg("网络错误", {
					icon: 5,
					time: 1500
				});
			}
		});
		upload.render({
			elem: '#image2',
			url: "{:url('common/UpImg')}" //图片上传地址
				,
			accept: 'images' //
				,
			acceptMime: 'image/*',
			size: 1024 * 12,
			before: function(res) {
				loading = layer.load(2, {
					shade: [0.2, '#000'] //0.2透明度的白色背景
				});
			},
			done: function(data) {
				var image2 = document.getElementById('image2')
				image2.innerHTML = ` <img id="img2" src="" style="width: 100%; height: 100%;" >`
				layer.close(loading);
				if (data.code == 1) {
					console.log(data)
					id_card_negativ = data.data.thumb_path
					$("#img2").attr("src", data.data.thumb_path);
					layer.msg('图片上传成功', {
						icon: 1,
						time: 1000
					});
				} else {
					layer.msg(data.msg, {
						icon: 5,
						time: 1000
					});
				}
			},
			error: function(red) {
				layer.close(loading);
				layer.msg("网络错误", {
					icon: 5,
					time: 1500
				});
			}
		});
		upload.render({
			elem: '#image3',
			url: "{:url('common/UpImg')}" //图片上传地址
				,
			accept: 'images' //
				,
			acceptMime: 'image/*',
			size: 1024 * 12,
			before: function(res) {
				loading = layer.load(2, {
					shade: [0.2, '#000'] //0.2透明度的白色背景
				});
			},
			done: function(data) {
				var image3 = document.getElementById('image3')
				image3.innerHTML = ` <img id="img3" src="" style="width: 100%; height: 100%;" >`
				layer.close(loading);
				if (data.code == 1) {
					console.log(data)
					other_certificate = data.data.thumb_path
					$("#img3").attr("src", data.data.thumb_path);
					layer.msg('图片上传成功', {
						icon: 1,
						time: 1000
					});
				} else {
					layer.msg(data.msg, {
						icon: 5,
						time: 1000
					});
				}
			},
			error: function(red) {
				layer.close(loading);
				layer.msg("网络错误", {
					icon: 5,
					time: 1500
				});
			}
		});
		/**
		 * 监听单行工具操作
		 */
		table.on('tool(table_id)', function(obj) {
			var data = obj.data;
			var _id = parseInt(data.id);
			var layEvent = obj.event;
			if (layEvent === "edit") {
				var urls = "{:url('add')}?id=" + _id;
				lucky.CreateOpenForm("编辑", urls);

			} else if (layEvent === "del") {
				lucky.FormatData(_id, "{:url('del')}");
			}
		});
		table.on('toolbar(table_id)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var data = checkStatus.data;
			if (obj.event === "add") {
				lucky.CreateOpenForm("添加押金费用", "{:url('add')}");
				return false;
				// adminAdd
			} else if (obj.event === "adminAdd") {
				lucky.CreateOpenForm("添加人工缴费用", "{:url('adminAdd')}");
				return false;
			} else if (obj.event === "close") {
				opTables.closeAll();
			} else if (obj.event === "open") {
				opTables.openAll();
			} else if (obj.event === "detail") {
				lucky.CreateOpenForm("订单详情", "{:url('detail')}");
				return false;
			} else if (obj.event === "reload") {
				lucky.CreateReload();
			} else if (obj.event === "del") {
				var num = 0;
				var id = [];
				for (var i in data) {
					num++;
					id.push(data[i].id);
				}
				if (num < 1) {
					layer.msg("请选择一项", {
						time: 1500
					});
					return false;
				}
				lucky.FormatData(id, "{:url('del')}");
				return false;
			}
		});

		/**
		 * 关键词搜索树
		 */
		form.on('submit(search)', function(obj) {
			lucky.CreateSearch(obj.field);
			return false;
		});
	});
</script>

{/block}
